<template>
  <div id="index" ref="appRef" class="app-container">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <!-- 标题区域 -->
        <div class="d-flex jc-center title-container">
          <dv-decoration-10 class="dv-dec-10" />
          <div class="d-flex jc-center">
            <dv-decoration-8 class="dv-dec-8" :color="decorationColors" />
            <div class="title">
              <span class="title-text">汾阳重点关注业务量</span>
              <dv-decoration-6
                class="dv-dec-6"
                :reverse="true"
                :color="['#50e3c2', '#67a1e5']"
              />
            </div>
            <dv-decoration-8
              class="dv-dec-8"
              :reverse="true"
              :color="decorationColors"
            />
          </div>
          <dv-decoration-10 class="dv-dec-10-s" />
        </div>

        <!-- 第二行 -->
        <div class="d-flex jc-between px-2 header-row">
          <div class="d-flex aside-left">
            <div class="react-left ml-4 react-l-s">
              <span class="react-before"></span>
              <span class="text" @click="goToHomePage">返回首页</span>
              <span class="text" @click="goToPuJiangWardPage">浦江</span>
            </div>
            <div class="react-left ml-3" style="min-width: 260px">
              <span class="text">{{ subtitle[1] }}</span>
            </div>
          </div>
          <div class="d-flex aside-right">
            <div
              class="react-right mr-3"
              style="background-color: #0f1325; min-width: 250px"
            >
              <span class="text fw-b">{{ subtitle[2] }}</span>
            </div>
            <div class="react-right mr-4 react-l-s">
              <span class="react-after"></span>
              <span class="text">
                {{ timeInfo.dateYear }} {{ timeInfo.dateWeek }}
                {{ timeInfo.dateDay }}
              </span>
            </div>
          </div>
        </div>

        <!-- 主要内容区：桌面优化容器 -->
        <div class="scroll-container mt-1">
          <div class="content-wrapper">
            <div class="body-box">
              <div class="WardBox">
                <WardView
                  v-for="(dept, index) in departmentsOnly"
                  :key="index"
                  :title="dept.deptName"
                  :dept-name="dept.deptName"
                  :full-statistics="fullStatistics"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onMounted, onUnmounted } from "vue";
import { formatTime } from "@/utils/index";
import { WEEK } from "@/constant/index";
import useDraw from "@/utils/useDraw";
import { title, subtitle, moduleInfo } from "@/constant/index";
import WardView from "./WardView.vue";
import axios from "axios";

export default defineComponent({
  components: { WardView },
  setup() {
    const decorationColors = ["#568aea", "#000000"];
    const loading = ref<boolean>(true);
    const timeInfo = reactive({
      setInterval: 0 as number,
      dateDay: "",
      dateYear: "",
      dateWeek: "",
    });

    const departmentsOnly = ref<any[]>([]);
    const fullStatistics = ref<any[]>([]);

    const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw();

    onMounted(() => {
      fetchData();
      handleTime();
      windowDraw();
      calcRate();
    });

    onUnmounted(() => {
      unWindowDraw();
      clearInterval(timeInfo.setInterval);
    });

    const fetchData = async () => {
      try {
        const response = await axios.get(
          window.globalConfig.baseApi +"/api/Nurse/GetAllStatisticsDataByDeptJson?IDataType=1&dbKey=dbFY"
        );
        const data = response.data;
        // 过滤 departmentsOnly 中 deptName 为空/无效的条目
        departmentsOnly.value = (data.departmentsOnly || []).filter(
          (dept) =>
            dept &&
            typeof dept.deptName === "string" &&
            dept.deptName.trim() !== ""
        );

        // 过滤 fullStatistics 中 deptName 为空/无效的条目
        fullStatistics.value = (data.fullStatistics || []).filter(
          (item) =>
            item &&
            typeof item.deptName === "string" &&
            item.deptName.trim() !== ""
        );
      } catch (error) {
        console.error("获取数据失败:", error);
      } finally {
        cancelLoading();
      }
    };

    const cancelLoading = () => {
      setTimeout(() => {
        loading.value = false;
      }, 500);
    };

    const handleTime = () => {
      timeInfo.setInterval = window.setInterval(() => {
        const date = new Date();
        timeInfo.dateDay = formatTime(date, "HH: mm: ss");
        timeInfo.dateYear = formatTime(date, "yyyy-MM-dd");
        timeInfo.dateWeek = WEEK[date.getDay()];
      }, 1000);
    };

    return {
      loading,
      timeInfo,
      appRef,
      title,
      subtitle,
      moduleInfo,
      departmentsOnly,
      fullStatistics,
    };
  },
  methods: {
    goToHomePage() {
      this.$router.push({ name: "Index" });
    },
    goToPuJiangWardPage() {
      this.$router.push({ name: "PuJiangZDGZYWL" });
    },
  },
});
</script>

<style lang="scss" scoped>
@import "../inpatientsDetailsCSS/FenYangWard.scss";

// 最外层容器 - 桌面适配核心
.app-container {
  width: 100%;
  min-width: 1280px; /* 桌面最小宽度 */
  max-width: 1920px; /* 主流桌面最大宽度 */
  margin: 0 auto; /* 居中显示 */
  padding: 0 20px;
  box-sizing: border-box;
}

.dv-scr-board {
  width: 100%;
  height: 250px;
}

// 标题区域
.title-container {
  width: 100%;
  padding: 0 20px;
}

.title {
  min-width: 300px;
}

// 头部行
.header-row {
  width: 100%;
  padding: 0 20px;
  margin-bottom: 15px;
}

// 左侧区域
.aside-left {
  flex: 1;
  min-width: 600px;
}

// 右侧区域
.aside-right {
  flex: 1;
  min-width: 600px;
  justify-content: flex-end;
}

// 滚动容器
.scroll-container {
  max-height: 90%;
  overflow-y: auto;
  padding: 0 10px;

  // 滚动条样式
  &::-webkit-scrollbar {
    width: 8px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: rgba(86, 138, 234, 0.5);
    border-radius: 4px;
  }
  &::-webkit-scrollbar-track {
    background-color: rgba(15, 19, 37, 0.5);
  }
}

// 内容容器
.content-wrapper {
  width: 100%;
  margin: 0 auto;
}

// 网格容器 - 桌面优化布局
.WardBox {
  display: grid;
  // 根据桌面宽度自动调整列数，每列固定400px
  grid-template-columns: repeat(auto-fill, 400px);
  gap: 20px;
  justify-content: center;
  padding: 10px 0;
}

// 主体内容
.host-body {
  width: 100%;
  margin: 0 auto;
}

// 桌面分辨率适配
@media screen and (min-width: 1600px) {
  .WardBox {
    gap: 30px;
  }

  .app-container {
    padding: 0 40px;
  }
}

@media screen and (min-width: 1920px) {
  .WardBox {
    grid-template-columns: repeat(4, 400px); /* 超宽屏显示4列 */
  }
}
</style>
